import React from 'react'
import {inject, observer} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Icon, SearchBar, Popover,Tools} from 'weaver-mobile';
import { SearchPage  } from 'weaver-mobile-page'; 
import {toJS} from 'mobx';
const getLabel = Tools.getLabel;

@withRouter
@inject('netdiskStore')
@observer
class SearchHistory extends React.Component {
  handleFocus = () => {
    const {netdiskStore,store} = this.props;
    // let {searchPage} = netdiskStore;
    // this.props.history.push(searchPage.path);
    // netdiskStore.setSearchHistory("search")
    let {myDiskSearchPage} = store;
    this.props.history.push(myDiskSearchPage.path);
    store.setSearchHistory("search")
  }

  render() {
    const {netdiskStore,store} = this.props;
    let {selectedTab,searchPage} = netdiskStore;
    let {inputElliVisible,myDiskSearchPage,myDiskSearchKey} = store;
    return (
      <div className="wea-netdisk-searchhistory">
        <SearchBar
          className="search-select"
          placeholder={getLabel(32933, "请输入关键字")}
          onFocus={this.handleFocus}
          value={myDiskSearchKey.keyword ? myDiskSearchKey.keyword : ''}
          showExtraButton
          extraButton={[
            { key: 'ellipsis', show:
            selectedTab !== 'myShare' &&
                <Popover mask
                         key={`${selectedTab}-popover`}
                         visible={inputElliVisible}
                         overlay={[
                           selectedTab === 'disk' ? (<Popover.Item key="add">{getLabel(20002, '新建目录')}</Popover.Item>) : null,
                            (<Popover.Item key="multiOper">{getLabel(-81455, '批量操作')}</Popover.Item>),
                         ]}
                         onVisibleChange={store.setInputElliVisible}
                         onSelect={store.selectInputElli}
                >
                  <Icon type="ellipsis" />
                </Popover>
            },
          ]}
        />
         <SearchPage
          store={myDiskSearchPage}
          type={1}
          nameKey="name"
          rowKey="key"
          onSubmit={(v) => {       
            let keyword = typeof(v) === 'string' ? v : v.name
            //去除所有空格
            if(keyword&&keyword.replace(/\s+/g,"")!==""){
              store.addHistory(keyword,"search");
            }
            if(netdiskStore.searchFolderid!=="" && netdiskStore.searchFolderid != "netdisk"){
              store.folderDoSearchByKeyword(keyword,netdiskStore.searchFolderid);
            }else{
              store.folderDoSearchByKeyword(keyword,"");
            }
          }}
          onClear={()=>{
            store.clearSearchHistory("search"); 
          }}
        />
      </div>
    );
  }
}

export default SearchHistory;